<template>
  <el-form>
    <draggable
      :list="list"
      :disabled="!enabled"
      class="list-group"
      ghost-class="ghost"
      :move="checkMove"
      @start="dragging = true"
      @end="dragging = false"
    >
      <div
        class="list-group-item"
        v-for="element in list"
        :key="element.name"
      >
        <!-- <el-form-item :label="$t('message.hello')"> -->
        <el-form-item :label="element.name">
          <!-- :label="$t('')" -->

          <el-input v-model="name" />
        </el-form-item>
      </div>
    </draggable>
  </el-form>
</template>
<script>
import draggable from 'vuedraggable'
export default {
  components: { draggable },
  data() {
    return {      enabled: true,
      list: [
        { name: 'John', id: 0 },
        { name: 'Joao', id: 1 },
        { name: 'Jean', id: 2 }
      ],
      dragging: false    }
  }
}
</script>
